<template>
	<view class="h-100">
		<view v-if="isLogin">
			<view class=" mt-2 bg-4 d-flex a-center j-center flex-column" style="height: 260px;">
				<view class="t-center">
					<image class="w-60 radius bd bd-color" src="../../static/images/index_second/05.jpg" mode="widthFix"></image>
					<view class="t-center fc">
						<view class="font-30">用户名</view>
						<view>phone：1234657978</view>
					</view>
				</view>
				
			</view>
			<view class="px-2">
				<!-- 第二块商品收藏  店铺关注  浏览记录 -->
				<view class="sec_floor bg-white mt-2 px-2 pt-3 pb-3">
					<view class="d-flex j-sb px-2">
						<view class="d-flex a-center" @tap="handleShouCang">
							<u-icon name="bookmark"></u-icon>
							<text class="font-30">商品收藏</text>
							<text class="font-25 ml">31</text>
						</view>
						<view class=" d-flex a-center" @tap="handleFocusOnShop">				
							<u-icon name="bookmark"></u-icon>
							<text class="font-30">店铺关注</text>
							<text class="font-25 ml">4</text>
						</view>
						<view class=" d-flex a-center" @tap="handleBrowingHistory">
							<u-icon name="bookmark"></u-icon>
							<text class="font-30">浏览记录</text>
							<text class="font-25 ml">100</text>
						</view>
					</view>
					<view class="d-flex a-start mt-2">
						<view @tap="goToDingDan(0)" class="w-20 d-flex flex-column j-center a-center">
							<text class="iconfont icon-daifukuan1 icon-size1"></text>
							<text class="font">待付款</text>
						</view>
						<view @tap="goToDingDan(1)" class="w-20 d-flex flex-column j-center a-center">
							<text class="iconfont icon-wuliu icon-size1" ></text>
							<text class="font">待收货</text>
						</view>
						<view   class="w-20 d-flex flex-column j-center a-center" @tap="goToDingDan(2)">
							<text class="iconfont icon-31daipingjia icon-size1"></text>
							<text class="font">待评价</text>
						</view>
						<view  class="w-20 d-flex flex-column j-center a-center" @tap="goToDingDan(3)">
							<view class="iconfont icon-shouhou icon-size1"></view>
							<text class="font">退换/售后</text>
						</view>
						<view  class="w-20 d-flex flex-column j-center a-center" @tap="goToDingDan(4)">
							<view class="iconfont icon-wodedingdan icon-size1 fc-red1"></view>
							<text class="font">我的订单</text>
							<text class="font-20 fcolor-1 t-center">查看电子发票</text>
						</view>
					</view>
					<!--待付款  -->
				</view>
				<view class="third_floor mt-3 bg-white pad-15 font-30">
					<view class="d-flex j-sb h-item a-center">
						<text>收货地址</text>
						<u-icon name="arrow-right" size="15"></u-icon>
					</view>
					<view class="d-flex j-sb h-item a-center" @tap="handleCustomerServer">
						<text>联系客服</text>
						<u-icon name="arrow-right" size="15"></u-icon>
					</view>
					<view class="d-flex j-sb h-item a-center " @tap="handleOut">
						<text>退出登录</text>
						<u-icon name="arrow-right" size="15"></u-icon>
					</view>
				</view>
			</view>
			
			
		</view>
		<!-- 未登录 -->
		<view v-if="!isLogin" class="d-flex j-center a-center h-100 flex-column bg-white">
			<image class="bd bd-color radius mb-2" style="width: 90px; height: 90px;" src="" mode="widthFix"></image>
			<button class="w-90 bg-4 fc font-35"  @tap="handleLogin">登录</button>
			<view class="mt-2 fc-black2 font-30">
				登录后享受更多权益
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false
			};
		},
		mounted() {
			console.log(this.$route.params.detail);
			this.msg = this.$route.params
		},
		methods: {
			// 跳转客服页面
			handleCustomerServer(){
				uni.navigateTo({
					url:'/pages/customerService/customerService'
				})
			},
			// 跳转浏览记录页面
			handleBrowingHistory(){
				uni.navigateTo({
					url:'/pages/browsingHistory/browsingHistory'
				})
			},
			// 跳转店铺关注页面
			handleFocusOnShop(){
				uni.navigateTo({
					url:'/pages/focusOnShop/focusOnShop'
				})
			},
			// 跳转收藏页面
			handleShouCang(){
				uni.navigateTo({
					url:'/pages/shoucang/shoucang'
				})
			},
			// 点击退出
			handleOut(){
				uni.showModal({
					title: '提示',
					content: '确定要退出吗？',
					success:  (res)=> {
						if (res.confirm) {
								this.login()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 点击登录按钮
			handleLogin(){
				this.showToast('登录成功','success')
				this.login()
			},
			handleClick() {
				uni.reLaunch({
					url: '/pages/index/index',
				})
			},
			goToDingDan(index){
				uni.navigateTo({
					url:'/pages/dingdan/dingdan?index='+index
				})
			},
			login(){
				this.isLogin = !this.isLogin
			},
			showToast(title,icon){
				uni.showToast({
					title,
					icon,
					duration:500
				})
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		box-sizing: border-box;
	}

	.login {
		.icons {
			.icon_wrap {
				display: flex;
				justify-content: flex-end;
			}
		}

		.top_wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 10px 15px;

			.left {
				display: flex;
				align-items: center;

				.userImg {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-right: 10px;
					border: 2px solid red;
				}
			}
		}

		// 第二块
		.sec_floor {
			background-color: #fff;
			margin-top: 10px;
			padding: 15px;
			border-radius: 10px;

			.top_sec {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top_item {
					.img {
						width: 16px;
						height: 16px;
					}

					.txt1 {
						color: #555555;
						font-weight: bold;
						margin-left: 2px;
					}

					.txt2 {
						color: #555555;
						font-size: 14px;
						margin-left: 2px;
					}
				}
			}

			

		}
	}
</style>
